<!-- 用户组件 -->
<template>
  <div class="user">
    <h2>用户信息</h2>
    <button @click="save">新增</button>
    <table border="1px">
        <tr>
            <td>员工编号</td>
            <td>员工姓名</td>
            <td>电话号码</td>
            <td>职位</td>
            <td>邮箱</td>
            <td>操作</td>
        </tr>   
        <tr v-for="item in employees" :key="item.employeeId">
            <td>{{item.employeeId}}</td>
            <td>{{item.empName}}</td>
            <td>{{item.phoneNumber}}</td>
            <td>{{item.position}}</td>
            <td>{{item.email}}</td>
            <td>
              <button @click="handleEdit(item)">编辑</button>
              <button @click="handleDelete(item.employeeId)">删除</button>
            </td>
        </tr>
    </table>
    
    <!-- 添加分页控件 -->
    <div class="pagination">
      <button 
        :disabled="pageNum <= 1" 
        @click="handlePageChange(pageNum - 1)"
      >上一页</button>
      <span>当前第 {{pageNum}} 页 / 共 {{totalPages}} 页</span>
      <button 
        :disabled="pageNum >= totalPages" 
        @click="handlePageChange(pageNum + 1)"
      >下一页</button>
      <span>总记录数：{{total}}</span>
    </div>
  </div>
</template>

<script>
import { getUserList, deleteUserById } from '@/api/user';

export default {
  name: "indexUser",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      empName: "",
      phoneNumber: "",
      pageNum: 1,
      pageSize: 10,    // 添加页大小
      total: 0,        // 添加总记录数
      totalPages: 0,   // 添加总页数
      employees:[]
    };
  },
  //方法集合
  methods: {
    //跳转到新增组件
    save(){
        this.$router.replace({
          path:'/user/AddUser',
        })
    },
    //获取用户列表
    dataUserList() {
      let params = {
        empName: this.empName,
        phoneNumber:this.phoneNumber,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getUserList(params).then((res) => {
        console.log(res);
        this.employees = res.data.list;
        this.total = res.data.total;
        this.totalPages = Math.ceil(res.data.total / this.pageSize);
      });
    },
    // 修改删除方法，使用原生confirm
    handleDelete(employeeId) {
      if (window.confirm('确认删除该用户吗？')) {
        deleteUserById(employeeId).then(res => {
          if (res.code === 200) {
            alert('删除成功');
            this.dataUserList(); // 重新加载用户列表
          } else {
            alert(res.msg || '删除失败');
          }
        }).catch(err => {
          alert('删除失败');
          console.error(err);
        });
      }
    },
    // 添加页码改变处理方法
    handlePageChange(newPage) {
      this.pageNum = newPage;
      this.dataUserList();
    },
    handleEdit(user) {
      this.$router.push({
        path: '/user/add',
        query: {
          type: 'edit',
          employeeId: user.employeeId
        }
      });
    },
  },
  created() {
    // 生命周期 - 创建完成（可以访问当前this实例）
    //钩子函数加载数据
    this.dataUserList();
  },
};
</script>
<style lang='less' scoped>
.user {
  // 添加容器样式
  padding: 20px;
  
  table {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #eee;
    
    button {
      margin: 0 10px;
      padding: 5px 10px;
      
      &:disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
    
    span {
      margin: 0 10px;
    }
  }
}
</style>